<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="userSearch" :inline="true"  size="mini">
                <el-form-item label="用户名：">
                    <el-input v-model="userSearch.user_name" clearable placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="userSearch.phone" clearable placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="userTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户名" width="160px">
                    <template slot-scope="scope">
                        <span @click="details(scope.row)" class="cup">{{ scope.row.user_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车牌/车架" width="160px">
                    <template slot-scope="scope">
                        <span style="display:block;cursor:pointer;" @click="lookCar(scope.$index, scope.row)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column label="加入时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time*1000 | formatDate }} {{ scope.row.create_time*1000 | formatDateBehind }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车记录" width="160px">
                    <template slot-scope="scope">
                        <span style="display:block;cursor:pointer;" @click="lookCarWash(scope.$index, scope.row)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值记录" width="160px">
                    <template slot-scope="scope">
                        <span style="display:block;cursor:pointer;" @click="lookTopup(scope.$index, scope.row)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column label="消费总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.consumption?scope.row.consumption:0 }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.recharge?scope.row.recharge:0 }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="积分(已使用)" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.integral_used }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="积分(未使用)" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.integral_unused }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="积分明细" width="120px">
                    <template slot-scope="scope">
                        <span style="display:block;cursor:pointer;" @click="lookintegral(scope.row)">查看</span>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- <el-dialog 
                :visible.sync="dialogintrgral"
                width="350px"
                >
                <div class="tc dialog_img"><img :src="intrgralmess.imageurl" alt=""></div>
                <div><span>用户姓名：</span>{{intrgralmess.name}}</div>
                <div><span class="ws3">微 信 号：</span>{{intrgralmess.openid}}</div>
                <div><span>会员等级：</span>{{intrgralmess.level | filvip}}</div>
                <div><span class="ws24">来 源：</span>{{intrgralmess.source | filsource}}</div>
                <div><span class="ws3">所 在 地：</span>{{intrgralmess.city}}</div>
                <div><span>优惠券数：</span>{{intrgralmess.coupon_num}}</div>
            </el-dialog> -->
            <!-- <el-dialog 
                :visible.sync="dialogintrgral"
                width="350px"
                @close="integralEdit"
                >
                <div class="f16 mb10"><span class="ws3">用户名：</span>{{intrgralmess.user_id}}</div>
                <div class="f14 mb10"><span>积分类型：</span>{{intrgralmess.type | filtype}}</div>
                <div class="f14 mb10"><span>积分数量：</span>{{intrgralmess.number}}</div>
                <div class="f14 mb10"><span>获取时间：</span>{{intrgralmess.create_time*1000 | formatDate}} {{intrgralmess.create_time*1000 | formatDateBehind}}</div>
                <div class="f14 mb10"><span>失效时间：</span>{{intrgralmess.end_time*1000 | formatDate}} {{intrgralmess.end_time*1000 | formatDateBehind}}</div>
                <div class="f14 mb10"><span>积分状态：</span>{{intrgralmess.state | filstate}}</div>
            </el-dialog> -->
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate } from '../../util/time.js';
export default {
    data() {
        return {
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            userSearch: {
                //搜索
                user_name: "", //用户名
                phone: "" //手机号
            },
            // intrgralmess: {
            //     user_id: '',
            //     type: '',
            //     number: '',
            //     create_item: '',
            //     end_time: '',
            //     state: '',
            // },
            userTable: [
                {
                    userName: "123", //用户名
                    userPhone: "15079542913", //手机号
                    dateline: "2020-07-30", //加入时间
                    consumeAllMoney: "18", //消费总金额
                    topUpAllMoney: "26", //充值总金额
                    userIntegral:"", //积分(已使用)
                    norIntegral:"", //积分(未使用)
                },
                {
                    userName: "456", //用户名
                    userPhone: "15079542913", //手机号
                    dateline: "2020-07-30", //加入时间
                    consumeAllMoney: "18", //消费总金额
                    topUpAllMoney: "26", //充值总金额
                    userIntegral:"", //积分(已使用)
                    norIntegral:"", //积分(未使用)
                },
                {
                    userName: "789", //用户名
                    userPhone: "15079542913", //手机号
                    dateline: "2020-07-30", //加入时间
                    consumeAllMoney: "18", //消费总金额
                    topUpAllMoney: "26", //充值总金额
                    userIntegral:"", //积分(已使用)
                    norIntegral:"", //积分(未使用)
                },
            ],
            dialogintrgral: false,           //积分详情
        };
    },
    filters:{
        // 等级
        // filvip(level){
        //     if(level === 0){
        //         level = "普通会员"
        //     }else if(level === 1){
        //         level = "黄金会员"
        //     }else if(level === 2){
        //         level = "钻石会员"
        //     }else{return}
        //     return level
        // },
        // // 来源
        // filsource(sou){
        //     if(sou === 0){
        //         sou = "总平台码"
        //     }else if(sou === 1){
        //         sou = "推广员码"
        //     }else if(sou === 2){
        //         sou = "用户分享"
        //     }else{return}
        //     return sou
        // },
        // 增减
        // filtype(sou){
        //     if(sou === 0){
        //         sou = "增加"
        //     }else if(sou === 1){
        //         sou = "减少"
        //     }else{return}
        //     return sou
        // },
        // // 失效
        // filstate(sou){
        //     if(sou === 0){
        //         sou = "失效"
        //     }else if(sou === 1){
        //         sou = "正常"
        //     }else{return}
        //     return sou
        // },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount}
            for(var i in this.userSearch) this.userSearch[i] !== '' ? data[i] = this.userSearch[i] : '';
            // console.log(data,this.userSearch)
            utils.request("/user/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.userTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){    
                    this.$message({
                        message: "为您找到"+resp.data.data.total+'位用户',
                        type: "success"
                    })
                }
            })
        },
        lookCar(index,row){
            // 查看车辆信息
            console.log(index,row)
            this.$router.push({ path: "/carOperation", query: { row: JSON.stringify(row) } });
        },
        lookCarWash(index,row){
            // 查看洗车记录
            console.log(index,row)
            this.$router.push({ path: "/carWash", query: { row: JSON.stringify(row) } });
        },
        lookTopup(index,row){
            // 查看充值记录
            console.log(index,row)
            this.$router.push({ path: "/topupOrder", query: { row: JSON.stringify(row) } });
        },
        lookintegral(row){
            this.$router.push({ path: "/integralDetails", query: { row: JSON.stringify(row)} });
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        // details(row){
        //     // 查看用户积分详情
        //     utils.request("/integralDetails/list","post",JSON.stringify({page:1,list_rows:10,user_id:row.id})).then(resp=>{
        //         // console.log(resp)
        //         if(resp.data.data.data.length > 0){  
        //             this.intrgralmess = resp.data.data.data[0];
        //             this.intrgralmess.user_id = row.user_name;
        //         }
        //     })
        //     this.dialogintrgral = true;
        // },
        integralEdit(){
            // 积分详情关闭
            for(var i in this.intrgralmess) this.intrgralmess[i] = '';
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1);
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1);
        }
    },
    created() {
        this.searchClick(1)
        // let data = {id:84,balance:"50"}
        // utils.request("/user/update","post",JSON.stringify(data)).then(reps=>{
        //     console.log(resp)
        // })
    }
};
</script>
<style scoped>
.dialog_img img{
    width: 90px;
    height: 90px;
    border-radius: 50px;
    box-shadow: 0 0 3px #c0c0c0;
}
</style>